import React, {Component, Fragment} from 'react';
import {
    Card, Form, Input, Button, Radio,
    InputNumber, Select, Switch, DatePicker,
    TimePicker, Icon, Upload, Checkbox, message
} from 'antd';
import moment from 'moment';

import './form.less';

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const Option = Select.Option;
const TestArea = Input.TextArea;



class FormRegister extends Component {

    state = {
        isCheck: false,
        agree: false
    };

    handleAgreeCheckedStatus = () => {
        this.setState({
            agree: !this.state.agree
        });
    };

    handleSwitchChange = () => {
        this.setState({
            isCheck: !this.state.isCheck
        });
    };

    getBase64(img, callback) {
        const reader = new FileReader();
        reader.addEventListener('load', () => callback(reader.result));
        reader.readAsDataURL(img);
    };

    handleUploadChange = (info) => {
        if (info.file.status === 'uploading') {
            this.setState({ loading: true });
            return;
        }
        if (info.file.status === 'done') {
            this.getBase64(info.file.originFileObj, imageUrl => this.setState({
                userImg: imageUrl,
                loading: false,
            }));
        }
    };

    handleFormSubmit = () => {
        this.props.form.validateFields((err, val) => {
            if (!err) {
                console.log(val);
                message.success(
                    `${val.username}, 恭喜你，通过了本次的表单学习\n
                     你的密码为：${val.password}; `
                )
            }
        });
    };


    render() {
        const {getFieldDecorator} = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: 24,
                sm: 6
            },
            wrapperCol: {
                xs: 24,
                sm: 8
            }
        };
        const offsetLayout = {
            wrapperCol: {
                xs: 24,
                sm: {
                    span: 8,
                    offset: 6
                }
            }
        };
        const uploadButton = (
            <div>
                <Icon type="plus" />
                <div className="ant-upload-text">Upload</div>
            </div>
        );

        return (
            <Fragment>
                <Card title={'注册表单'} className={'card-content'}>
                    <Form>
                        <FormItem label={'用户名'} {...formItemLayout}>
                            {
                                getFieldDecorator('username', {
                                    initialValue: '',
                                    rules: [
                                        {required: true, message: '用户名不能为空'},
                                        {min: 5, max: 16, message: '用户名长度应在5~16位'}
                                    ]
                                })(
                                    <Input placeholder={'请输入您的用户名'} />
                                )
                            }
                        </FormItem>
                        <FormItem label={'昵 称'} {...formItemLayout}>
                            {
                                getFieldDecorator('nickname', {
                                    initialValue: ''
                                })(
                                    <Input placeholder={'请输入您的昵称'} />
                                )
                            }
                        </FormItem>
                        <FormItem label={'密 码'} {...formItemLayout}>
                            {
                                getFieldDecorator('password', {
                                    initialValue: ''
                                })(
                                    <Input type={'password'} placeholder={'请输入您的密码'} />
                                )
                            }
                        </FormItem>
                        <FormItem label={'确认密码'} {...formItemLayout}>
                            {
                                getFieldDecorator('re-password', {
                                    initialValue: ''
                                })(
                                    <Input type={'password'} placeholder={'请再次输入您的密码'} />
                                )
                            }
                        </FormItem>
                        <FormItem label={'性 别'} {...formItemLayout}>
                            {
                                getFieldDecorator('gender', {
                                    initialValue: 1
                                })(
                                    <RadioGroup>
                                        <Radio value={1}>男</Radio>
                                        <Radio value={2}>女</Radio>
                                    </RadioGroup>
                                )
                            }
                        </FormItem>
                        <FormItem label={'年 龄'} {...formItemLayout}>
                            {
                                getFieldDecorator('age', {
                                    initialValue: 24
                                })(
                                    <InputNumber min={18} max={120} />
                                )
                            }
                        </FormItem>
                        <FormItem label={'当前状态'} {...formItemLayout}>
                            {
                                getFieldDecorator('currState', {
                                    initialValue: 3
                                })(
                                    <Select>
                                        <Option value={1}>应届毕业生</Option>
                                        <Option value={2}>屌丝一枚</Option>
                                        <Option value={3}>社会老鸟</Option>
                                        <Option value={4}>高富帅</Option>
                                        <Option value={5}>白富美</Option>
                                        <Option value={6}>创业者</Option>
                                        <Option value={7}>技术大牛</Option>
                                        <Option value={8}>编程小白</Option>
                                    </Select>
                                )
                            }
                        </FormItem>
                        <FormItem label={'兴趣爱好'} {...formItemLayout}>
                            {
                                getFieldDecorator('hobbies', {
                                    initialValue: [1, 3, 5, 6]
                                })(
                                    <Select mode={'multiple'}>
                                        <Option value={1}>编程</Option>
                                        <Option value={2}>唱歌</Option>
                                        <Option value={3}>跳舞</Option>
                                        <Option value={4}>乐器</Option>
                                        <Option value={5}>游泳</Option>
                                        <Option value={6}>爬山</Option>
                                        <Option value={7}>分享技术</Option>
                                        <Option value={8}>打篮球</Option>
                                        <Option value={9}>健身</Option>
                                        <Option value={10}>游戏</Option>
                                    </Select>
                                )
                            }
                        </FormItem>
                        <FormItem label={'是否已婚'} {...formItemLayout}>
                            {
                                getFieldDecorator('married', {
                                    initialValue: this.state.isCheck
                                })(
                                    <Switch checked={this.state.isCheck}
                                            checkedChildren={'是'}
                                            unCheckedChildren={'否'}
                                            onChange={this.handleSwitchChange}
                                    />
                                )
                            }
                        </FormItem>
                        <FormItem label={'生 日'} {...formItemLayout}>
                            {
                                getFieldDecorator('birthday', {
                                    initialValue: moment(new Date())
                                })(
                                    <DatePicker/>
                                )
                            }
                        </FormItem>
                        <FormItem label={'联系地址'} {...formItemLayout}>
                            {
                                getFieldDecorator('address', {
                                    initialValue: ''
                                })(
                                    <TestArea autosize={true} />
                                )
                            }
                        </FormItem>
                        <FormItem label={'早起时间'} {...formItemLayout}>
                            {
                                getFieldDecorator('times', {
                                    initialValue: moment('08:20:00', 'HH:mm:ss')
                                })(
                                    <TimePicker />
                                )
                            }
                        </FormItem>
                        <FormItem label={'头 像'} {...formItemLayout}>
                            {
                                getFieldDecorator('userImg')(
                                    <Upload listType={'picture-card'}
                                            showUploadList={false}
                                            action={'//jsonplaceholder.typicode.com/posts/'}
                                            onChange={this.handleUploadChange}
                                    >
                                        {
                                            this.state.userImg ?
                                                <img width={128} height={128} src={this.state.userImg} alt={'用户头像'} />
                                                : uploadButton
                                        }
                                    </Upload>
                                )
                            }
                        </FormItem>
                        <FormItem label={'个人简介'} {...formItemLayout}>
                            {
                                getFieldDecorator('person-intro', {
                                    initialValue: ''
                                })(
                                    <TestArea autosize={{ minRows: 3, maxRows: 6 }} />
                                )
                            }
                        </FormItem>
                        <FormItem {...offsetLayout}>
                            {
                                getFieldDecorator('agree', {
                                    initialValue: this.state.agree,
                                })(
                                    <Checkbox
                                        onChange={this.handleAgreeCheckedStatus}
                                        checked={this.state.agree}
                                    >
                                        我已阅读过
                                    </Checkbox>
                                )
                            }
                            <a href={'#/admin'}>用户协议</a>
                        </FormItem>
                        <FormItem {...offsetLayout}>
                            <Button type={'primary'} onClick={this.handleFormSubmit}
                                    style={{width: '100%'}}
                            >
                                注 册
                            </Button>
                        </FormItem>
                    </Form>
                </Card>
            </Fragment>
        );
    }
}

export default Form.create()(FormRegister);